<template>
	<view class="layout">
		<view class="detail">
			<soup-tab-group></soup-tab-group>
			<soup-text-content :showNumbers="true"></soup-text-content>
		</view>
		<view class="comment">

		</view>
		<view class="interactive">
			<interactive-bar :barType="1" v-on:click="showCommentPopup"></interactive-bar>
			<view class="safe-area-bottom"></view>
		</view>
		<uni-popup ref="commentPop" type="bottom" :safeArea="false">
			<comment-reply></comment-reply>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const commentPop = ref(null)
	const showCommentPopup = () => {
		commentPop.value.open()
	}
</script>

<style lang="scss" scoped>
	.layout {

		.detail {
			padding: 50rpx 30rpx;
			border-bottom: 12px solid #F7F7F7;
		}

		.comment {
			min-height: 800rpx;
		}

		.interactive {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			background: #fff;
			border-top: 1px solid #e4e4e4;
		}
	}
</style>